<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Vue set</title>
	</head>
	<body>
		<div id="app">
			<h2>vue.set 全局操作</h2>
			<hr />
			<p>{{count}} - {{goods}}</p>
			<p><button onclick="add()">add</button></p>
			<ul>
				<li v-for="item in arr">{{item}}</li>
			</ul>
		</div>
		<script src="../assets/js/vue.min.js"></script>
		<script type="text/javascript">
			//点击按钮，数字+1
			function add() {
				//方法1
//				Vue.set(outData, 'count' ,2)
				//方法2
//				vm.count++;
				//方法3 原生
				outData.count++;
				//vm.arr[1] = 123;
				//在有DOM操作更新count的情况下，采用下标变换数组是可行的，
				//注释count的更新操作后，直接通过下标来改变数组是没有用的
				
				//用vue.set可以解决这个问题
				Vue.set(vm.arr,1,333);//参数为所要改变的对象，对象的第几个下标，修改后的值
				//虚拟DOM的值里面，用下标来改变数组，javascript不支持，vue监测不到，
				//vue提供vue.set来解决这个问题
			};
			
			//构造器外面声明数据
			var outData = {
				count: 1,
				goods: 'car',
				arr: ['aaa','bbb','ccc']
			}
			var vm = new Vue({
				el:'#app',
				data: outData
			})
		</script>
	</body>
</html>
